<template>
  <div>
    <!-- 表单 -->
    <el-form label-width="80px">
      <el-form-item label="店铺名称">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="店铺公告">
        <el-input type="textarea" v-model="bulletin"></el-input>
      </el-form-item>

      <el-form-item label="店铺头像">
        <el-upload
          class="avatar-uploader"
          :action="Upload_Shop_Img"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img
            style="width: 150px; height: 150px"
            :src="avatar == '' ? '' : Get_Shop_Img + avatar"
            class="avatar"
            alt
          />
        </el-upload>
      </el-form-item>

      <el-form-item label="店铺图片">
        <el-upload
          :action="Upload_Shop_Img"
          list-type="picture-card"
          :on-success="Upload_ShopList_img"
          :on-remove="handleRemove"
          :file-list="ShopImgList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="配送费">
        <el-input v-model="deliveryPrice"></el-input>
      </el-form-item>
      <el-form-item label="配送时间">
        <el-input v-model="deliveryTime"></el-input>
      </el-form-item>
      <el-form-item label="配送描述">
        <el-input v-model="description"></el-input>
      </el-form-item>
      <el-form-item label="店铺评分">
        <el-input v-model="score"></el-input>
      </el-form-item>

      <el-form-item label="销量">
        <el-input v-model="sellCount"></el-input>
      </el-form-item>

      <el-form-item label="活动">
        <el-checkbox-group v-model="supports">
          <el-checkbox label="满20-10"></el-checkbox>
          <el-checkbox label="首单减10元"></el-checkbox>
          <el-checkbox label="单人特色套餐"></el-checkbox>
          <el-checkbox label="特价饮品八折抢购"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="营业时间">
        <el-time-picker
          is-range
          v-model="date"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        ></el-time-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  ShopInfo,
  Get_Shop_Img,
  Upload_Shop_Img,
  ShopEdit,
} from "../../../../api/apis";
import { getTime } from "../../../utils/utils";
export default {
  data() {
    return {
      id: "", //店铺ID
      name: "", //店铺名称
      bulletin: "", //公告
      avatar: "", //店铺头像
      deliveryPrice: "", //配送费
      deliveryTime: "", //送达时间
      description: "", //描述
      score: "", //评分
      sellCount: "", //销量
      supports: [], //活动
      pics: "", //店铺图片
      date: [], //营业时间
      minPrice: "", //起送价格
      Get_Shop_Img: "", //获取店铺图片
      Upload_Shop_Img: "", //上传图片
      ShopImgList: [], //店铺照片墙
    };
  },
  methods: {
    // 头像上传成功
    handleAvatarSuccess(res) {
      if (res.code == 0) {
        this.$message({
          message: "上传店铺头像成功",
          type: "success",
        });
        this.avatar = res.imgUrl;
      }
    },
    // 商家图片列表s上传成功
    Upload_ShopList_img(res) {
      if (res.code == 0) {
        this.pics.push(res.imgUrl);
      }
      console.log(this.pics);
    },
    // 移除照片墙  用splic操作
    handleRemove(res) {
      // var arr = [23, 3, 4, 5];
      // console.log(arr.indexOf(5));  输出结果：4
      // this.pics.indexOf(res.name); 获取删除图片的名字 确定是哪张图片
      this.pics.splice(this.pics.indexOf(res.name), 1); //删除图片
      console.log(this.pics);
    },
    // 保存按钮
    onSubmit() {
      let params = {
        id: this.id,
        name: this.name,
        bulletin: this.bulletin,
        avatar: this.avatar,
        deliveryPrice: this.deliveryPrice,
        deliveryTime: this.deliveryTime,
        description: this.description,
        score: this.score,
        sellCount: this.sellCount,
        supports: JSON.stringify(this.supports),
        date: JSON.stringify([getTime(this.date[0]), getTime(this.date[1])]),
        pics: JSON.stringify(this.pics),
      };
      // 店铺内容修改
      ShopEdit(params).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "店铺内容修改成功",
            type: "success",
          });
        }
      });
    },
  },
  created() {
    this.Get_Shop_Img = Get_Shop_Img;
    this.Upload_Shop_Img = Upload_Shop_Img;
    ShopInfo().then((res) => {
      // for of 不能遍历对象，for in 能遍历对象
      for (let i in res.data.data) {
        this[i] = res.data.data[i];
      }
      // 回填店铺照片墙数据
      // console.log(this.pics);['1590480883773.webp', '1590480886706.webp',]
      this.ShopImgList = this.pics.map((imgstr) => {
        return {
          name: imgstr,
          url: Get_Shop_Img + imgstr,
        };
      });
      // var arr = [1, 2, 3, 4, 5, 6];
      // arr.map((x) => {
      //   console.log(x);
      // });
    });
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 60%;
}
</style>